<!-- 逾期页面 -->
<template>
	<view class="CollectMoney">
		<uni-search-bar v-model="keyword" style="background-color:#ffffff7d;" radius="5" placeholder="请输入客户名称进行查询"
			clearButton="always" @confirm="search" @cancel="cancel" @clear="cancel" />
		<view class="container">
			<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="lower">
				<view style="position: relative;" class="cItem backred" v-for="item in data" :key="item.Id"
					@click="toWebView(item.Id,item.billlistId, item.OverdueDay)">
					<view class="scrollTag">
						<image style="" src="../../static/yuqi.png" mode=""></image>
					</view>
					<view class="customer">
						{{item.Name}}
					</view>
					<view class="customer">
						单号: {{getReplaceId("S"+item.Id)}}
					</view>
					<view class="line">
						<view class="cell">
							<view class="lable font">账期</view>
						</view>
						<view class="cell font">
							{{item.DelayDays?item.DelayDays+' 天':""}}
						</view>
					</view>
					<view class="line">
						<view class="cell">
							<view class="lable font">逾期天数</view>
						</view>
						<view class="cell font">
							<!-- <view class="lable">日期</view> -->
							{{item.OverdueDay?item.OverdueDay+' 天':"0天"}}
						</view>
					</view>
					<view class="line">
						<view class="cell">
							<view class="lable font">逾期金额</view>
						</view>
						<view class="cell font">
							￥{{momenyFormat(item.TotalSum-item.CollectionSum)}}
						</view>
					</view>
					<view class="line">
						<view class="cell">
							<view class="lable font">签收日期</view>
						</view>
						<view class="cell font">
							{{item.SigningDate?'&nbsp;'+item.SigningDate.substring(0,10):''}}
						</view>
					</view>
					<view class="line flexRight">
						<text @click.stop="CallForPay(item)">催款</text>
						<!--  -->
						<!--	<text @click="toSettlement(item)">销账收款</text> -->
						<!-- <uni-tag :inverted="true" text="收款记录" type="primary" />
						<uni-tag @click="toSettlement(item)" :inverted="true" text="销账收款" type="primary" /> -->
					</view>
				</view>
				<!-- 上拉显示更多 -->
				<view class="" style="padding-bottom: 60rpx;">
					<uniLoadMore :status="status" :contentText="contentText" :rows="data"></uniLoadMore>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	import {
		momenyFormat
	} from '@/util/util.js'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				pagination: {
					PageIndex: 1,
					PageRows: 10,
					SortField: "CreateTime",
					SortType: "desc",
				},
				total: 0,
				keyword: '',
				data: [],
				headerData: {}
			}
		},
		onLoad() {
			// this.getHeaderData()
			// this.getDataList()
		},
		onShow() {
			
			// 初始化
			//清楚查询页面条件缓存
			uni.removeStorageSync('indexSearchQueryValue')
			this.pagination.PageIndex = 1
			this.pagination.PageRows = 10
			this.data = []
			//如果搜索有缓存则搜索缓存。
			if(uni.getStorageSync('CollectMoneySearch')){
				this.keyword = uni.getStorageSync('CollectMoneySearch');
				this.getDataList();
			}else{
				this.cancel()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.cancel()
			uni.stopPullDownRefresh(); //停止刷新
		},
		// 重置相关参数
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/user/user'
			})
		},
		methods: {
			// 字符串空格处理
			getReplaceId(data){
				if(data){
					return data.replace(/\s/g, '').replace(/(.{4})/g, "$1 ")
				}
			},
			// 去小票页面
			toWebView(Id, billId, OverdueDay) {
				uni.navigateTo({
					url: '/pages/Arrears/webview?Id=' + Id + '&billId=' + billId + '&OverdueDay=' + OverdueDay
				})
			},
			// 去收款
			toSettlement(data) {
				uni.navigateTo({
					url: '/pages/CollectMoney/Settlement?data=' + JSON.stringify(data)
				})
			},
			// 催款
			CallForPay(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/Arrears/CallForPay?data=' + JSON.stringify(item)
				})
				// uni.navigateTo({
				// 	url: `/pages/CollectMoney/List?key=${key}&data=${JSON.stringify(item)}`
				// })
			},
			// 触底
			lower() {
				this.getDataList()
			},
			// getHeaderData() {
			// 	this.$http('post', '/BO/BIlling/GetDateCollectionData?CompanyId=' + uni.getStorageSync('CompanyInfo')
			// 		.Id).then(res => {
			// 		console.log(res);
			// 		if (!res.Success) return this.$api.msg(res.Msg)
			// 		this.headerData = res.Data
			// 	})
			// },
			// 获取逾期列表
			getDataList() {
				//缓存关键字
				if(this.keyword){
					uni.setStorage({
						key:'CollectMoneySearch',
						data:this.keyword
					})
				}else{
					uni.removeStorageSync('CollectMoneySearch')
				}
				this.status = "loading"
				this.$http('post', '/BO/BIlling/GetCompanyBIllingOverdueList', {
					...this.pagination,
					Search: {
						CompanyId: uni.getStorageSync('CompanyInfo').Id,
						CustomerName: this.keyword
					}
				}).then(res => {
					if (res.Success) {
						// 赋值总条数
						this.Total = res.Total
						let lists = res.Data
						if (lists.length == 0 || lists == []) {
							// 没有更多了
							this.status = "noMore"
							// this.contentText.contentnomore="今日未开单"
							return
						} else {
							if (this.pagination.PageIndex == 1) {
								this.data = lists
								this.pagination.PageIndex += 1

							} else {
								this.data = this.data.concat(lists)
								this.pagination.PageIndex += 1
								if (this.pagination.PageRows * this.pagination.PageIndex >= this.Total) {
									this.contentText.contentnomore = "没有更多了"
									// 暂停加载  没有更多了
									this.status = "noMore"
									return
								}

							}
							this.contentText.contentnomore = "没有更多了"
							this.status = "noMore"
						}

					} else {
						this.contentText.contentnomore = "没有更多了"
						this.status = "noMore"
					}
				})
			},
			// 查询
			search(e) {
				this.keyword = e.value
				this.pagination.PageIndex = 1
				this.pagination.PageRows = 30
				this.data = []
				this.getDataList()
			},
			cancel() {
				this.keyword = ''
				this.pagination.PageIndex = 1
				this.pagination.PageRows = 10
				this.data = []
				this.getDataList()
			},
			momenyFormat(num) {
				return momenyFormat(num)
			}
		}
	}
</script>

<style scoped lang="scss">
	.CollectMoney {
		height: 100%;
		width: 100%;
		background-image: url('/static/background.png');
		background-size: cover;

		.moneyT {
			background-color: #ffffff7d;
			display: flex;
			justify-content: space-around;
			padding: 10px;
			padding-top: 18px;

			.tItem {
				width: 40%;
				background-color: #2ba7e9b3;
				color: #fff;
				box-sizing: border-box;
				border-radius: 10rpx;
				text-align: center;

				.title {
					line-height: 2;
					border-bottom: 1px solid #eee;
				}

				.content {
					font-weight: bold;
					line-height: 2;
					font-size: 34rpx;
				}
			}
		}

		.container {
			padding: 10px;
			padding-bottom: 0;
			/* #ifdef H5 */
			height: calc(100vh - 180px);
			/* #endif */

			/* #ifdef APP */
			height: calc(100vh - 80px);

			/* #endif */
			.cItem.backred {
				background: rgb(255, 240, 240) !important;
			}

			.cItem {
				background-color: #fff;
				border-radius: 10rpx;
				box-sizing: border-box;
				font-weight: 600;
				padding: 10rpx;
				padding-bottom: 5rpx;
				margin-bottom: 10rpx;

				.scrollTag {
					position: absolute;
					right: 0;
					top: 0;

					image {
						width: 100rpx;
						height: 100rpx;
					}
				}

				.bottomLine {
					// border-bottom: 1px solid #ccc;
					padding-bottom: 10rpx;
					margin-bottom: 10rpx;
				}

				.line.flexRight {
					margin-top: 20rpx;
				}

				.line {
					display: flex;

					.cell.font {
						font-weight: normal;
					}

					.cell {
						flex: 1;
						display: flex;
						justify-content: space-between;
						margin-right: 20rpx;

						.lable.font {
							font-weight: normal;
						}

						.lable {
							width: 60px;
						}

						text {
							flex: 1;
							color: blue;
						}
					}
				}

				.flexRight {
					justify-content: flex-end;
					color: #2979ff;
					font-weight: normal;

					text {
						border-bottom: 1px solid #2979ff;
						margin-left: 60rpx;
					}
				}
			}
		}
	}
</style>